<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name=viewport content="width=device-width,initial-scale=1">
<title>订单详情</title>
<link rel="stylesheet" href="${ctxStatic}/jiujiudevice/css/public.css" />
<script type="text/javascript"
	src="${ctxStatic}/jiujiudevice/js/jquery-1.9.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js?v=5"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js?v=5"></script>
<style type="text/css">
		table{
				width: 100%;			
				line-height: 28px;
				color: #666666;
				padding-left: 15px;
				margin-top: 10px;
			}
			.title{
				font-size: 13px;
			}
			td{
				border-bottom: 1px #EEEEEE dashed;
			}
			.context{
				font-size: 12px;
				color: #999999;
			}
</style>
</head>

<body style="background: #f6f6f6;">
  <div id="app">
		<div class="p-top">
			<p class="p-title h2" style="border-bottom: 1px #eee solid;font-size: 16px;padding-bottom: 6px;">消费结算</p>
			<div>				
				<!--<div class="p-desc">
					<p>开始时间 2018年5月25日 15:25:25</p>
					<p>结束时间 2018年5月25日 16:25:25</p>
				</div>-->
				<div class="box flex-between" style="text-align: center; padding: 5px 0;">
					<div class="p-desc">
						<p>设备单价：<span style="color: #333;">{{devicePrice | numFilter}}元/分钟</span></p>
						
					</div>
					<div class="p-desc">
						<p>使用时长：<span style="color: #333;">{{deviceUseTime}}分钟</span></p>
						
					</div>
					<div class="p-desc">
						<p>设备费用：<span style="color:red;">{{deviceAmount |  numFilter}}元</span> </p>
						
					</div>
				</div>
				
				<div class="box flex-between" v-if='otherMessage' style="text-align: center;border-top: 1px #EEEEEE dashed;padding: 5px 0;" v-for="(items,index) in otherMessage">
					
					<div class="p-desc">
						<p>{{items.name}}单价：<span style="color: #333;">{{items.price | numFilter}}元/分钟</span></p>
						

					</div>
					<div class="p-desc">
						<p>使用时长：<span style="color: #333;">{{deviceUseTime}}分钟</span></p>
						
					</div>
					<div class="p-desc">
						<p>{{items.name}}费用：<span style="color: red;">{{items.value | numFilter}}元</span></p>
						
					</div>
				</div>
				<c:if test="${deviceType == 1 }">
				<div class="box flex-between" style="text-align: center;border-top: 1px #EEEEEE dashed;padding: 5px 0;">
					<div class="p-desc">
						<p>墨盒费用：</p>
						

					</div>
					<div class="p-desc">
<!-- 						<p>使用时长：<span style="color: #333;">10分钟</span></p>
 -->						
					</div>
					<div class="p-desc">
						<p><span style="color:red ;">{{inkMoney | numFilter}}元</span></p>
						
					</div>
				</div>
				</c:if>

			</div>
			<p class="p-moeny h2"><span>共计</span> <span>{{amount | numFilter}}元</span></p>
		</div>
	 </div>
	<!-- 墨盒总计开始 -->
	<!-- 如果是加墨设备显示 1-加墨设备 0-开关设备 -->
	   <c:if test="${deviceType == 1 }">
		<div class="p-top"  style="margin-top: 10px;padding-top: 8px;" id="inkDetail">
			<p class="p-title   box flex-between">
			<span>墨盒结算</span>
			<span><i style="color: #12BB73;">查看详情</i></span>
			</p>
			<div>
				<!-- <div id="deviceContent">
				<table>
					<tr class="title">
						<td>路线</td>
						<td>墨盒</td>
						<td>单价</td>
						<td>使用重量</td>	
						<td>消费金额</td>					
					</tr>
					<tr class="context">
						<td>1路</td>
						<td style="color:#DC0511;"><span style="width: 10px; height: 10px; background: #DC0511; display: inline-block; margin-right: 6px;"></span>红色</td>
						<td>10g</td>						
					</tr>
					<tr class="context">
						<td>2路</td>
						<td style="color:blue;"><span style="width: 10px; height: 10px; background: blue; display: inline-block; margin-right: 6px;"></span>红色</td>
						<td>10g</td>	
					</tr>
					
				</table>
			</div>					 -->	
		</div>
		<%-- <p class="p-moeny">
			<span>合计</span> <span>${orderLog.inkMoney}元</span>
		</p> --%>
	</div>
	</c:if>
	<!-- 墨盒总计结束-->
	
			<!-- 消费总计开始 -->
	<div class="p-top" style="margin-top: 10px;padding-top: 8px;">
		<div class="p-desc " style="font-size:14px;">
		   <p>订单编号 ${order.orderNo }</p>
			<p>
				创建时间
				<fmt:formatDate value="${order.createTime }"
					pattern="yyyy年MM月dd日 HH:mm:ss" />
			</p>
			<p>
				支付时间
				<fmt:formatDate value="${order.payTime }"
					pattern="yyyy年MM月dd日 HH:mm:ss" />
			</p>
		</div>
	</div>
	<!-- 消费总计结束 -->
	

	<script type="text/javascript"
		src="${ctxStatic}/jiujiudevice/js/jquery-1.9.1.min.js"></script>

	<script type="text/javascript">
		//跳转墨盒详情页
		 $("#inkDetail").click(function(){
			 window.location.href = "${ctxFront }/jiujiudevice/payinkDetail?sn=${order.deviceSn }&orderNo=${orderLog.orderNo}&r="+Math.random();
		 });
		 /* 		 function toDecimal2(x) {    
		    var f = parseFloat(x);    
		    if (isNaN(f)) {     
		    return false;    
		    }    
		    var f = Math.round(x*100)/100;    
		    var s = f.toString();    
		    var rs = s.indexOf('.');    
		    if (rs < 0) {     
		    rs = s.length;     
		    s += '.';    
		    }    
		    while (s.length <= rs + 2) {     
		    s += '0';    
		    }    
		    return s;   
		} */
		 </script>

			<script type="text/javascript">
			   var app = new Vue({
				  el: '#app',
				  data: {
					  otherMessage: ${orderLog.otherMessage},
					  devicePrice:'${orderLog.devicePrice }',
					  deviceUseTime: '${orderLog.deviceUseMin }',
					  deviceAmount: '${orderLog.deviceAmount }',
					  inkMoney: '${orderLog.inkMoney }',
					  amount: '${order.amount }',
					  
				  },
				 filters: {
						  numFilter:function(val){

						   val = val.toString().replace(/\$|\,/g,'');
					    if(isNaN(val)) {
					        val = "0";  
					      } 
					      let sign = (val == (val = Math.abs(val)));
					      val = Math.floor(val*100+0.50000000001);
					      let cents = val%100;
					      val = Math.floor(val/100).toString();
					      if(cents<10) {
					         cents = "0" + cents
					      }
					      for (var i = 0; i < Math.floor((val.length-(1+i))/3); i++) {
					          val = val.substring(0,val.length-(4*i+3))+',' + val.substring(val.length-(4*i+3));
					      }

					      return (((sign)?'':'-') + val + '.' + cents);
						  }

				  },
				 mouted:function(){
					  console.log(this.otherMessage)
				  }
				})
		 </script>
</body>

</html>